<template>
  <VueAutoScale
    :width="1920"
    :height="1080"
    :delay="100"
    :scale-type="scaleType"
    :reverse-scaling-ids="['div2']"
  >
    <button @click="changeScaleType(1)">强制铺满</button>
    <button @click="changeScaleType(2)">按比例适配</button>

    <div
      ref="div1"
      style="width: 200px; height: 200px; background-color: #535bf2; color: white; margin: 10px"
    >
      请改变浏览器大小查看效果
      <br />
      宽度:{{ state.div1.width }} 高度:{{ state.div1.height }}
    </div>
    <!--    使用于地图等元素 -->
    <!--    <div style="width: 200px; height: 200px;overflow: hidden;">
      <div ref="div2"
           id="div2"
           style="width: 200px; height: 200px; background-color: #21bb42;color: white; margin: 10px;">
        请改变浏览器大小查看效果
        <br>
        父元素需要设置overflow: hidden
        <br>
        宽度:{{ state.div2.width }}
        高度:{{ state.div2.height }}
      </div>
    </div>-->
  </VueAutoScale>
</template>

<script setup lang="ts">
import { VueAutoScale } from '@/packages/index.js'
// import { VueAutoScale } from '/dist/VueAutoScale.es.js'

import { reactive, ref } from 'vue'

const div1 = ref<HTMLElement | null>(null)
// const div2 = ref(null)
const scaleType = ref(1)
const state = reactive({
  div1: {
    width: 0,
    height: 0,
  },
  // div2: {},
})

const changeScaleType = (type: number) => {
  scaleType.value = type
  if (div1.value) {
    state.div1 = div1.value.getBoundingClientRect()
  }
  // state.div2 = div2.value.getBoundingClientRect()
}
</script>

<style scoped></style>
